<template>
  <div class="bot">
      <h6>使用第三方账号登录</h6>
      <hr>
      <div class="ico">
          <span>
              <i :style="img"></i><br>
              新浪微博
          </span>
          <span>
              <i :style="img"></i><br>
              QQ登录
          </span>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            img:{backgroundImage: "url(" + require("sta/ico.png") + ")"}
        }
    }
}
</script>

<style scoped>
    .bot{
        margin-top: 0.6rem;
    }
    h6{
        font-size: 0.3rem;
        color: #CCC;
        margin: auto;
        width: 3rem;
    }
    .ico{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 0.6rem;
    }
    .ico span{
        width: 40%;
        display: block;
        margin: 0 0.35rem;
        border: 1px solid #e6e5e5;
        background-color: #f3f3f3;
        text-align: center;
        color: #666;
        font-size: 0.35rem;
        line-height: 1.4em;
        padding-bottom: 0.2rem;
        border-radius: 5px;
    }
    .ico span i{
        width: 0.9rem;
        height: 1rem;
        display: inline-block;
        background: url(/img/ico.png) no-repeat;
        background-size: 130px 30px;
    }
    .ico span:first-child i{
        background-position: 5px 10px;
    }
    .ico span:last-child i{
        background-position: -43px 10px;
    }
</style>